const layer = (function () {

    //单例模式 保证仅此一例
    //静态方法中new实例
    class LayerMsg {
        constructor() {
            this.oLayer = document.createElement("div");
            this.oTitle = document.createElement("div");
            this.oLayer.addEventListener("animationend",function () {
                console.log(1111);
            })
        }
        static instance() {
            if (LayerMsg.instnceObj == undefined) {
                LayerMsg.instnceObj = new LayerMsg();
            }
            return LayerMsg.instnceObj;
        }

        msg(title) {

            this.oLayer.style.cssText = `
            display: block;
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: rgba(163, 168, 172, 0.3);
            `
            this.oLayer.appendChild(this.oTitle)
            this.oTitle.style.cssText = `
            height: 200px;
            width: 350px;
            border: 1px solid #000;
            background-color: white;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);    
            box-shadow:0px 0px 3px 7px #c0c0c0;
            `
            this.oTitle.innerText = title;
            document.body.appendChild(this.oLayer);

            setTimeout(() => {
                this.oLayer.style.display = "none"
            }, 3000)
        }

        alert(title, { btn }, callback) {
            // this.oLayer.className = "slideInDown animated infinite";
            this.oLayer.style.cssText = `
            display: block;
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: rgba(163, 168, 172, 0.3);
            `
            this.oLayer.appendChild(this.oTitle)
            this.oTitle.style.cssText = `
            height: 200px;
            width: 350px;
            border: 1px solid #000;
            background-color: white;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);    
            box-shadow:0px 0px 3px 7px #c0c0c0;
            `
            this.oTitle.innerText = title;
            document.body.appendChild(this.oLayer);


            //添加一个按钮
            var oBtnsClose = document.createElement("button");
            oBtnsClose.innerText = btn[0];
            oBtnsClose.style.position = "absolute";
            oBtnsClose.style.left = "50%"
            oBtnsClose.style.top = "80%"
            oBtnsClose.style.transform = "translate(-50%,-50%)";
            this.oTitle.appendChild(oBtnsClose)
            oBtnsClose.onclick = () => {
                this.oLayer.style.display = "none";
                if (typeof callback == "function") {
                    callback();
                }
            }

            // this.oTitle.className = "slideInDown animated infinite";

            // setTimeout( ()=> {
            //         this.oTitle.className="";
            // },1000)

        }

        
    }


    const msg = (title) => {
        LayerMsg.instance().msg(title);
    }
    const alert = (title, obj, callback) => {
        LayerMsg.instance().alert(title, obj, callback);
    }
    return {
        msg,
        alert

    }
})()